<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
        <title>Checkbox column - simple-datatables</title>
        <!-- DataTable Styles -->
        <link rel="stylesheet" href="../dist/css/style.css">
        <!-- Demo Styles -->
        <link rel="stylesheet" href="../demo.css">
        <style>
            span.checkbox {
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>
                <a href="../../">simple-datatables</a>
            </h1>
            <a href="../../documentation">Documentation</a>
            <a href="../">Demos</a>
        </header>

        <h2>Checkbox column</h2>

        <table id="demo-table"></table>

        <script type="module">
            import {
                DataTable
            } from "../dist/module.js"
            // Instantiate
            fetch("datatable.json").then(
                response => response.json()
            ).then(
                data => {
                    const datatable = new DataTable("#demo-table", {
                        type: "string",
                        data: {
                            headings: ["Checked"].concat(Object.keys(data[0])),
                            data: data.map(item => [false].concat(Object.values(item)))
                        },
                        rowRender: (rowValue, tr, _index) => {
                            if (!tr.attributes) {
                                tr.attributes = {}
                            }
                            tr.attributes["data-name"] = rowValue.cells[1].data
                            return tr
                        },
                        columns: [
                            {
                                select: 0,
                                sortable: false,
                                render: (value, _td, _rowIndex, _cellIndex) => `<span class="checkbox">${value ? "☑" : "☐"}</span>`
                            }
                        ]
                    })
                    datatable.dom.addEventListener("click", event => {
                        if (event.target.matches("span.checkbox")) {
                            event.preventDefault()
                            event.stopPropagation()
                            const name = event.target.parentElement.parentElement.dataset.name
                            const index = parseInt(event.target.parentElement.parentElement.dataset.index, 10)
                            const row = datatable.data.data[index]
                            const cell = row.cells[0]
                            const checked = cell.data
                            cell.data = !checked
                            datatable.update()

                            // Timeout used for the checkbox to have time to update and show as checked. It is not required.
                            setTimeout(
                                () => alert(`"${name}" has been ${checked ? "unchecked" : "checked"}.`),
                                0
                            )
                        }
                    })
                    window.datatable = datatable
                }
            )
        </script>
    </body>
</html>
